<template>
  <div>
    <customDetailsTopbar title="一般降碳项目管理" flag @back="back" />
    <div class="px-1">
      <customSearch ref="customSearch" placeholder="请输入名称" title="项目信息登记列表" :total="total" :is-super-search="false" @search="handleSearch" @superSearch="openSuperSearch" />
      <div class="d-flex mt-2 w-100">
        <custom-radio-tag1 class="mb-1 w-100" :list="tagList" :check-value="checkedTag" is-scroll @change="tagChange" />
      </div>
      <div class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order"><img src="@/assets/images/ryicon.png"></div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.company }}
                <span v-if="checkedTag === '节能技改项目追踪'">{{ item.schedule }}</span>
              </div>
              <ul class="des-list">
                <li v-for="des,ind in desList" :key="des.value" class="des">
                  <i :class="'iconfont c-text-color' + (ind + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value">{{ item[des.value] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
export default {
  mixins: [commonList],
  data() {
    return {
      total: 10,
      pages: 1,
      form: {},
      tagList: [
        { label: '项目信息登记', value: '项目信息登记' },
        { label: '减排效果评价', value: '减排效果评价' }
      ],
      checkedTag: '项目信息登记',
      desListMap: {
        '项目信息登记': [
          { label: '企业名称', value: 'enterprise', icon: '&#xe790;' },
          { label: '降碳项目类型', value: 'type', icon: '&#xe634;' },
          { label: '项目进度', value: 'schedule', icon: '&#xe64d;' }
        ],
        '减排效果评价': [
          { label: '企业名称', value: 'enterprise', icon: '&#xe790;' },
          { label: '降碳项目类型', value: 'type', icon: '&#xe634;' },
          { label: '年减排量（万吨）', value: 'number', icon: '&#xe629;' }
        ]
      },
      desList: [],
      tableList: [
        ...new Array(10).fill(1).map(val => ({
          enterprise: '成都光明电股份有限公司',
          type: '可再生能源项目',
          number: '0.254',
          schedule: '进行中',
          company: '减污降碳节能增效'
        }))
      ]
    }
  },
  mounted() {
    this.desList = this.desListMap[this.checkedTag]
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    goDetail() {
      this.$router.push({
        path: '/staging/projectManageDetail',
        query: { tag: this.checkedTag }
      })
    },
    tagChange(val) {
      this.checkedTag = val.item.value
      this.desList = this.desListMap[this.checkedTag]
    },
    handleSearch() { },
    handlePages() { },
    resetSuperSearch() { },
    handleSuperSearch() { }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
</style>
